<template>
  <!-- 新增采购单 -->
  <div class="container">
    <div class="left">
      <div class="title">添加采购入库单</div>
      <div class="codeInfo">
        <div>
          采购入库编号：<span style="color: #436ae8">{{
            leftContent.purchaseInOrderNo
          }}</span>
        </div>
        <div>制单人：{{ leftContent.createdName }}</div>
        <div>制单时间：{{ $moment(leftContent.createdTime) }}</div>
      </div>

      <div class="leftContext">
        <el-table :data="leftContent.orderPurchaseOrderItems">
          <el-table-column label="操作" v-if="$route.query.type">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="delBut(scope.$index)">删除</el-button>
            </template>
          </el-table-column>
          <el-table-column
            label="序号"
            type="index"
            width="55"
          ></el-table-column>

          <el-table-column label="供应商">
            <template slot-scope="scope">
              <span @click="openDetails(scope.row)">{{
                scope.row.supplierName
              }}</span>
            </template>
          </el-table-column>

          <el-table-column label="创建人" width="120px; ">
            <template slot-scope="scope">
              <span @click="openDetails(scope.row)">{{
                scope.row.createdName
              }}</span>
            </template>
          </el-table-column>

          <el-table-column label="采购部门">
            <template slot-scope="scope">
              <span @click="openDetails(scope.row)">{{
                scope.row.purchaseOrgName
              }}</span>
            </template>
          </el-table-column>

          <el-table-column label="采购仓库" width="120px;">
            <template slot-scope="scope">
              <p @click="openDetails(scope.row)">
                <span
                  v-for="items in scope.row.orderPurchaseOrderProdDepots"
                  :key="items.id"
                  >{{ items.purchaseDepotName }}（{{
                    items.purchaseProdQuantity
                  }}）</span
                >
              </p>
            </template>
          </el-table-column>

          <el-table-column label="未入库数量" width="140px;">
            <template slot-scope="scope">
              <span @click="openDetails(scope.row)">{{
                scope.row.noWareNumber
              }}</span>
            </template>
          </el-table-column>

          <el-table-column label="采购商品" width="140px;">
            <template slot-scope="scope">
              <span @click="openDetails(scope.row)">{{
                scope.row.purchaseProdName
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="商品类型">
            <template slot-scope="scope">
              <span
                @click="openDetails(scope.row)"
                v-if="scope.row.purchaseProdType == 1"
                >商品</span
              >
              <span @click="openDetails(scope.row)" v-else>赠品</span>
            </template>
          </el-table-column>

          <el-table-column label="商品图片">
            <template slot-scope="scope">
              <img
                v-if="scope.row.purchaseProdImage"
                @click="openDetails(scope.row)"
                style="width: 50px; height: 50px"
                :src="ImgHttps + scope.row.purchaseProdImage"
                alt=""
              />
              <span v-else>/</span>
            </template>
          </el-table-column>

          <el-table-column label="品牌">
            <template slot-scope="scope">
              <span @click="openDetails(scope.row)">{{
                scope.row.purchaseProdBrandName
              }}</span>
            </template>
          </el-table-column>

          <el-table-column label="规格">
            <template slot-scope="scope">
              <span @click="openDetails(scope.row)">{{
                scope.row.purchaseProdSpecificationName
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="采购金额">
            <template slot-scope="scope">
              <span @click="openDetails(scope.row)">{{
                scope.row.purchaseProdPrice
              }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="right">
      <div class="title">操作</div>
      <div class="rightContext" style="border: 0">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="入库部门">
            <div class="selectTree">
              <treeselect
                :options="options"
                v-model="form.bumenCode"
                search-nested
                :normalizer="normalizer"
                noResultsText="未找到"
                placeholder="请选择"
                disabled
              >
              </treeselect>
            </div>
          </el-form-item>
          <el-form-item label="供应商">
            <el-input
              size="small"
              placeholder="请输入供应商名称"
              :value="form.supplierName"
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item label="入库类型">
            <el-input
              size="small"
              placeholder="请输入入库类型"
              :value="form.purchaseProdType == 1 ? '商品' : '赠品'"
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item label="入库商品">
            <el-input
              size="small"
              placeholder="请输入入库商品"
              :value="form.purchaseProdName"
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item label="入库规格">
            <el-input
              size="small"
              placeholder="请输入入库规格"
              :value="form.purchaseProdSpecificationName"
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item label="入库品牌">
            <el-input
              size="small"
              placeholder="请输入入库品牌"
              :value="form.purchaseProdBrandName"
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item label="入库金额">
            <el-input
              size="small"
              placeholder="请输入入库金额"
              :value="form.purchaseProdPrice * form.purchaseProdQuantity"
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item label="入库数量">
            <el-input
              type="number"
              size="small"
              placeholder="请输入入库数量"
              :value="form.purchaseProdQuantity"
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item label="入库仓库">
            <div
              v-for="(ite, index) in form.depotVos1"
              :key="index"
              v-if="ite.type == 0 || ite.type == undefined"
              style="
                display: flex;
                justify-content: space-between;
                align-items: center;
              "
            >
              <el-select
                :value="ite.purchaseDepotName"
                size="mini"
                value-key="purchaseDepotId"
                placeholder="请选择"
                @change="myWareListChange($event, ite)"
                disabled
              >
                <el-option
                  v-for="item in wareList.list"
                  :key="item.id"
                  :label="item.name"
                  :value="item"
                >
                </el-option>
              </el-select>
              <div style="display: flex; align-items: center">
                <el-input-number
                  size="mini"
                  :min="0"
                  :max="form.noWareNumber"
                  style="margin-right: 10px"
                  placeholder="请输入库存数量"
                  v-model="ite.purchaseProdNotInDepotQuantity"
                  @change="inputChange(ite)"
                ></el-input-number>

                <!-- <i
                  v-if="jage == 1"
                  class="el-icon-remove-outline"
                  style="cursor: pointer"
                  @click="deleteMyWare(ite, ite.type != undefined ? 1 : 0)"
                ></i> -->
              </div>
            </div>
            <!-- <i
              v-if="jage == 1"
              class="el-icon-circle-plus-outline"
              style="cursor: pointer"
              @click="addMyWareList(form)"
            ></i> -->
          </el-form-item>
          <el-form-item label="备注">
            <el-input maxlength="255" placeholder="请输入备注" type="textarea" v-model="textarea"></el-input>
          </el-form-item>
        </el-form>
        <p style="text-align: right; margin-top: 50px">
          <el-button type="primary" size="mini" @click="submit">确认</el-button>
        </p>
      </div>
    </div>
  </div>
</template>
<script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  components: { Treeselect },
  data() {
    return {
      table: {
        list: [],
        pageNo: 1,
        pageSize: 10,
      },
      form: {}, //表单数据
      wareList: {
        list: [],
      },
      leftContent: "",
      normalizer(node) {
        return {
          id: node.orgCode,
          label: node.orgName,
          children: node.children,
        };
      },
      options: [],
      jage: "1", //待提交的修改1 已完成的修改 2
      textarea:""
    };
  },
  created() {
    // this.jage = this.$route.query.jage;
    // console.log(this.jage +"---jage")
    this.listAxios(this.$route.query.purchaseOrderNo);
    this.department();
    this.getWareList();
  },
  activated() {
    this.listAxios(this.$route.query.purchaseOrderNo);
  },
  methods: {
    delBut(i){
      this.leftContent.orderPurchaseOrderItems.splice(i,1);
    },
    openDetails(row) {
      this.form = row;
    },
    // 部门选择列表
    department() {
      this.axios
        .post(
          "/sys/v1/org/tree/select",
          {
            request: {
              orgName: "",
              orgType: "",
            },
            version: "",
          },
          {
            headers: {
              isLoading: false,
            },
          }
        )
        .then((res) => {
          if (res.code == 0) {
            this.options = res.data;
          } else {
            this.$message.error(res.message);
          }
        });
    },
    // 数据请求 详情
    listAxios(purchaseOrderNo) {
      this.axios
        .post("/order/v1/purchase/in/order/confirm", {
          request: {
            purchaseOrderNo: purchaseOrderNo,
          },
          version: "",
        })
        .then((res) => {
          if (res.code == 0) {
            for (let i in res.data.orderPurchaseOrderItems) {
              res.data.orderPurchaseOrderItems[i].depotVos1 = JSON.parse(
                JSON.stringify(
                  res.data.orderPurchaseOrderItems[i]
                    .orderPurchaseOrderProdDepots
                )
              );
              res.data.orderPurchaseOrderItems[i].fileListImg = [];
              res.data.orderPurchaseOrderItems[i].bumen = [];
              res.data.orderPurchaseOrderItems[i].bumenCode =
                res.data.orderPurchaseOrderItems[i].purchaseOrgCode;
              res.data.orderPurchaseOrderItems[i].noWareNumber = 0;
              // 统计未入库数量
              for (let o in res.data.orderPurchaseOrderItems[i]
                .orderPurchaseOrderProdDepots) {
                res.data.orderPurchaseOrderItems[i].noWareNumber +=
                  res.data.orderPurchaseOrderItems[
                    i
                  ].orderPurchaseOrderProdDepots[
                    o
                  ].purchaseProdNotInDepotQuantity;
              }
            }
            this.leftContent = res.data;
            this.form = this.leftContent.orderPurchaseOrderItems[0];
            this.numberTotalWare();
          } else {
            this.$message.error(res.message);
          }
        });
    },
    addMyWareList(param) {
      if (this.form.depotVos1.length < this.wareList.list.length) {
        this.form.depotVos1.push({
          // "createdBy": "",
          // "createdTime": "",
          // "id": '',
          purchaseDepotId: "", //采购仓库ID
          purchaseDepotName: "",
          purchaseOrderItemId: "",
          purchaseOrderNo: param.purchaseOrderNo,
          purchaseProdId: param.purchaseProdId,
          purchaseProdInDepotQuantity: 0,
          purchaseProdName: param.purchaseProdName,
          purchaseProdNotInDepotQuantity: 0,
          purchaseProdQuantity: 0, //采购商品数量
          purchaseProdType: "",
          status: "",
          updatedBy: "",
          updatedTime: "",
        });
      } else {
        this.$message.warning("不能再加了仓库只有这些");
      }
    },
    //删除现在的仓库
    deleteMyWare(e, t) {
      if (t) {
        let temp = this.form.depotVos1.find(
          (res) => res.purchaseDepotId === e.warId
        );
        temp.type = 1;
      } else {
        this.form.depotVos1.splice(
          this.form.depotVos1.findIndex(
            (res) => res.purchaseDepotId == e.warId
          ),
          1
        );
      }
      this.numberTotalWare();
    },
    //自己选择的仓库修改了
    myWareListChange(e1, e2) {
      let temp = this.form.depotVos1.find(
        (res) => e1.id == res.purchaseDepotId
      );
      if (temp) {
        if (temp.type) {
          this.$message.warning("该仓库已删除不能选");
        } else {
          this.$message.warning("该仓库已存在");
        }
        return;
      }
      e2.purchaseDepotId = e1.id + "";
      e2.purchaseDepotName = e1.name;
      this.$forceUpdate();
    },
    inputChange(e) {
      this.numberTotalWare();
    },
    // 计算采购总库存
    numberTotalWare() {
      let numberTotal = 0;
      for (let i in this.form.depotVos1) {
        if(this.form.depotVos1[i].purchaseProdNotInDepotQuantity){
          numberTotal += this.form.depotVos1[i].purchaseProdNotInDepotQuantity;
        }else{
          this.form.depotVos1[i].purchaseProdNotInDepotQuantity = 0;
        }
      }
      this.form.purchaseProdQuantity = numberTotal;
    },
    getWareList() {
      this.axios
        .post("order/comm/commWarehouse/list",{
        pageSize:999,
        pageNo:1
      }, {
          isLoading: false,
        })
        .then((res) => {
          //仓库数据接口
          this.wareList = res.data;
          this.wareList.list = this.wareList.list.reverse();
        });
    },

    // 数据提交 已完成修改
    submit: _.debounce(function () {
      // 数据处理
      let itemList = [];

      for (let i in this.leftContent.orderPurchaseOrderItems) {
        if (
          this.leftContent.orderPurchaseOrderItems[i].bumenCode == "" ||
          this.leftContent.orderPurchaseOrderItems[i].bumenCode == null
        ) {
          this.$message.warning("请选择采购的部门");
          return false;
        } else if (
          this.leftContent.orderPurchaseOrderItems[i].depotVos1[0]
            .purchaseDepotId == "" &&
          this.leftContent.orderPurchaseOrderItems[i].depotVos1[0]
            .purchaseProdQuantity == 0
        ) {
          this.$message.warning("请选择采购入库的仓库与数量");
          return false;
        }

        this.getMenuBtnList(
          this.options,
          this.leftContent.orderPurchaseOrderItems[i].bumen,
          this.leftContent.orderPurchaseOrderItems[i].bumenCode
        );

        // 待提交修改完成

        // if (this.jage == 1) {
        this.leftContent.orderPurchaseOrderItems[i].warehouses1 = [];
        this.leftContent.orderPurchaseOrderItems[i].totalDepotQuantity = 0; //总数量
        this.leftContent.orderPurchaseOrderItems[i].inDepotQuantity = 0; //入库数量
        this.leftContent.orderPurchaseOrderItems[i].noDepotQuantity = 0; //未入库数量
        //处理详情的仓库数据

// console.log(this.leftContent.orderPurchaseOrderItems[i].depotVos1)

        for (let k in this.leftContent.orderPurchaseOrderItems[i].depotVos1) {
          // 某个供应商(入库)总数量   noDepotQuantity 修改改变的是这个参数
          this.leftContent.orderPurchaseOrderItems[
            i
          ].noDepotQuantity += this.leftContent.orderPurchaseOrderItems[
            i
          ].depotVos1[k].purchaseProdNotInDepotQuantity;

        // 仓库数据返回后台处理
          this.leftContent.orderPurchaseOrderItems[i].warehouses1.push({
            id: this.leftContent.orderPurchaseOrderItems[i].depotVos1[k].id,
            depotQuantity:this.leftContent.orderPurchaseOrderItems[i].depotVos1[k].purchaseProdNotInDepotQuantity,
            purchaseDepotName: this.leftContent.orderPurchaseOrderItems[i]
              .depotVos1[k].purchaseDepotName,
          });
        }

        //this.leftContent.orderPurchaseOrderItems[i].noWareNumber 总的未入库数量
        if (
          this.leftContent.orderPurchaseOrderItems[i].noDepotQuantity >
          this.leftContent.orderPurchaseOrderItems[i].noWareNumber
        ) {
          this.$message.warning("入库数量不能大于未入库数量哦！");
          return false;
        }

        itemList.push({
          id: this.leftContent.orderPurchaseOrderItems[i].id,
          depotBaseDtoList: this.leftContent.orderPurchaseOrderItems[i]
            .warehouses1,
          inDepotQuantity: this.leftContent.orderPurchaseOrderItems[i]
            .noDepotQuantity, //入库数量
          notInDepotQuantity:
            this.leftContent.orderPurchaseOrderItems[i].noWareNumber -
            this.leftContent.orderPurchaseOrderItems[i].noDepotQuantity, //未入库数量=总的未入库数量 -入库数量

          // 新增查看数据
          createdName: this.leftContent.orderPurchaseOrderItems[i].createdName,
          supplierName: this.leftContent.orderPurchaseOrderItems[i]
            .supplierName,
          purchaseOrgName: this.leftContent.orderPurchaseOrderItems[i]
            .purchaseOrgName,
          purchaseProdName: this.leftContent.orderPurchaseOrderItems[i]
            .purchaseProdName,
          purchaseProdType: this.leftContent.orderPurchaseOrderItems[i]
            .purchaseProdType,
          purchaseProdImage: this.leftContent.orderPurchaseOrderItems[i].purchaseProdImage,
          purchaseProdBrandName: this.leftContent.orderPurchaseOrderItems[i]
            .purchaseProdBrandName,
          purchaseProdSpecificationName: this.leftContent
            .orderPurchaseOrderItems[i].purchaseProdSpecificationName,
          total:
            this.leftContent.orderPurchaseOrderItems[i].purchaseProdPrice *
            this.leftContent.orderPurchaseOrderItems[i].noDepotQuantity,
          purchaseProdPrice: this.leftContent.orderPurchaseOrderItems[i]
            .purchaseProdPrice,
        });
      } //循环结束

      //待提交修改
      if (this.jage == 1) {
        this.$router.push({
          name: "purchaseInformation",
          query: {
            addPurchaseInOrderDtoList: JSON.stringify(itemList),
            content: JSON.stringify({
              purchaseInOrderNo: this.leftContent.purchaseInOrderNo, //采购入库订单号
              purchaseOrderNo: this.$route.query.purchaseOrderNo,
              createdTime: this.leftContent.createdTime,
              createdName: this.leftContent.createdName,
            }),
            test:this.$route.query.purchaseInOrderNo,
            textarea:this.textarea
          },
        });
      } else {
        this.axios
          .post("/order/v1/purchase/order/updatePurchaseOrderByComplete", {
            request: {
              purchaseOrderNo: this.$router.query.purchaseOrderNo,
              addPurchaseInOrderDtoList: itemList,
              purchaseInOrderNo: this.leftContent.purchaseInOrderNo, //采购入库订单号
            },
          })
          .then((res) => {
            console.log(res);
            if (res.code == 0) {
              this.$message.success("修改成功!");
              this.$router.push({ name: "purchasingList" });
            } else {
              this.$message.error(res.message);
            }
          });
      }
    }, 300),

    // 递归
    getMenuBtnList(menuTreeList, menuList, code) {
      for (let item of menuTreeList) {
        if (item.orgCode == code) {
          menuList.push({
            lable: item.orgName,
            orgCode: item.orgCode,
            type: item.type,
          });
        } else if (item.children && item.children.length > 0) {
          this.getMenuBtnList(item.children, menuList, code);
        }
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.container {
  display: flex;
  height: 100%;
  .left {
    overflow: auto;
    background: #fff;
    padding: 10px;
    flex: 1;
    min-width: 600px;
    .title {
      color: #6b6b6b;
      font-size: 16px;
      border-bottom: 2px solid #e3e7ec;
      padding-bottom: 10px;
    }
    .leftContext {
      margin-top: 10px;
      border: 1px solid#E3E7EC;
    }
  }
  .right {
    overflow: auto;
    flex: 1;
    background: #fff;
    padding: 10px;
    margin-left: 10px;
    min-width: 400px;
    .title {
      color: #6b6b6b;
      font-size: 16px;
      border-bottom: 2px solid #e3e7ec;
      padding-bottom: 10px;
    }
    .rightContext {
      margin-top: 10px;
      border: 1px solid#E3E7EC;
    }
  }
}
.codeInfo {
  display: flex;
  justify-content: space-around;
  margin-top: 10px;
  div {
    font-size: 15px;
    color: #666;
  }
}
/deep/.el-table th > .cell {
  color: #333;
}
/deep/.el-form-item {
  margin-bottom: 10px;
}
.liimg {
  position: relative;
  display: inline-block;
  margin-right: 12px;
  width: 80px;

  p {
    text-align: center;
    font-size: 12px;
    color: #666;
  }

  .close {
    position: absolute;
    top: -20px;
    right: -10px;
    z-index: 10;
  }

  .close:hover {
    cursor: pointer;

    i {
      color: #006af1;
    }
  }

  .img-avatar {
    width: 80px;
    height: 80px;
    border-radius: 5px;
  }
}

.selectTree {
  width: 100%;
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
  height: 30px;

  /deep/.el-cascader .el-input .el-input__inner {
    line-height: 30px;
    height: 30px;
    width: 100%;
  }
  /deep/.el-cascader .el-input {
    width: 250px;
  }
  /deep/.vue-treeselect {
    height: 30px;
  }
  /deep/.vue-treeselect--searchable .vue-treeselect__input-container {
    height: 30px;
    line-height: 30px;
  }
  /deep/.vue-treeselect__single-value {
    font-size: 14px;
    line-height: 30px;
  }
  /deep/.vue-treeselect__menu-container {
    font-size: 15px;
  }
  /deep/.vue-treeselect__multi-value-item {
    height: 20px;
    line-height: 20px;
    padding: 0;
  }
  /deep/.vue-treeselect__input {
    height: 28px;
    line-height: 28px;
    outline: none;
    border: none;
    padding: 0;
    // display: none;
    // border:1px solid #000;
  }
  /deep/.vue-treeselect__placeholder {
    font-size: 10px;
    line-height: 28px;
  }
  /deep/.vue-treeselect--has-value .vue-treeselect__multi-value {
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /deep/.vue-treeselect__control {
    height: 30px;
  }
}
</style>